<template>
    <div>
        <Vcode :show="isShow" @success="onSuccess" @close="onClose" :imgs="imgArr" sliderText="拖动滑块验证"/>
        <button @click="onSubmit">登录</button>
    </div>

</template>

<script>
import Vcode from "vue-puzzle-vcode";
let img1=require('@/assets/cao.jpg')
let img2=require('@/assets/mgdz.jpg')
export default {
    data() {
        return {
            isShow: false, // 验证码模态框是否出现
            imgArr:[img1,img2]
        }
    },
    components: {
        Vcode
    },
    methods: {
        onSubmit() {
            this.isShow = true;
        },
        // 用户通过了验证
        onSuccess(msg) {
            console.log('成功');
            this.isShow = false; // 通过验证后，需要手动隐藏模态框
        },
        // 用户点击遮罩层，应该关闭模态框
        onClose() {
            this.isShow = false;
        }
    }
}
</script>
